<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>


    <!-- 卡片视图区 -->
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 订单列表数据 -->
      <el-table :data="orderList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="订单编号" prop="orderCode"></el-table-column>
        <el-table-column label="订单价格" prop="orderPrice"></el-table-column>
        <el-table-column label="是否付款" prop="orderPayMoney">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.orderPayMoney === 0">未付款</el-tag>
            <span type="success" v-else>已付款</span>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" >
          <template slot-scope="scope">
            <span v-if="scope.orderPayShipments === 0">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" prop="orderCreatetime">
          <template slot-scope="scope">
            {{scope.row.orderCreatetime | dataFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100%">
          <template>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialogVisible = true"></el-button>
            <el-button
              type="info"
              icon="el-icon-location"
              size="mini"
              @click="showProgressBox"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        layout="total, prev, pager, next"
        @current-change="handleCurrentChange"
        @prev-click="PrevClick"
        @next-click="nextClick"
        :total="total">
      </el-pagination>

      <!-- 修改的dialog -->
      <el-dialog
        title="修改地址"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="addressDialogClose"
      >
        <el-form :model="addressForm"
                 :rules="addressFormRules"
                 ref="addressFormRef"
                 label-width="100px" >
          <el-form-item label="省市区/县" prop="address1">
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange">
            </el-cascader>
          </el-form-item>

          <el-form-item label="详细地址" prop="address2">
            <el-input v-model="addressForm.address2"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 物流信息Dialog -->
      <el-dialog
        title="物流进度"
        :visible.sync="proProgressDialogVisible"
        width="50%"
        >

        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>


      </el-dialog>

    </el-card>

  </div>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

export default {
  name: "Order",
  data() {
    return {
      // 查询对象
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      // 订单列表
      orderList: [],
      // 总数据数
      total: 0,

      editDialogVisible: false,
      // 行政区域对象
      addressForm: {
        address1: '',
        address2: ''
      },
      addressFormRules: {
        address1: [
          {
            required: true, message: '请选择省市区/县', trigger: 'blur'
          }
        ],
        address2: [
          {required: true, message:'请填写详细地址', trigger: 'blur'}
        ]
      },
      options: regionData,
      selectedOptions: [],
      proProgressDialogVisible: false,

      // time-line
      activities: [{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
        color: '#0bbd87'
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46'
      },
        {
          content: '这部分功能写死，没有开发',
          timestamp: '2018-04-03 20:46'
        },

      ]


      // ----- data end -----
    }
  },
  created() {
    this.getOrderList();
  },
  methods: {

    // 获取订单列表
    async getOrderList() {
      const {data: res} = await this.$http({
        url: `/order/getOrderList`,
        method: 'get',
        params: this.queryInfo
      });

      if (!res.status) return this.$message.error(this.res.message);
      this.orderList = res.data.orderList;
      this.total = res.data.total;
      this.$message.success(res.message);
    },
    // 分页， 当前页数改变
    handleCurrentChange(pageNum) {
      this.queryInfo.pageNum = pageNum;
      this.getOrderList();
    },
    // 分页，前一页点击事件
    PrevClick(pageNum) {
      this.queryInfo.pageNum = pageNum;
      this.getOrderList();
    },
    // 分页， 后一页点击事件
    nextClick(pageNum) {
      this.queryInfo.pageNum = pageNum;
      this.getOrderList();
    },
    // 级联，改变事件
    handleChange(value) {
      console.log(value)
    },
    addressDialogClose() {
      this.$refs.addressFormRef.resetFields();
      this.selectedOptions = []
    },
    showProgressBox() {
      this.proProgressDialogVisible = true;
    }
    // ----- methods end -----
  }

}
</script>

<style scoped>

</style>
